<script setup lang="ts">
import { useDeatilStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';

const router=useRouter()
const route=useRoute()
const detailStore=useDeatilStore()
detailStore.getDetail(route.query.hoscode as string)
detailStore.getDepartmentList(route.query.hoscode as string)
let  selectMenu=(path:string)=>{
  router.push(path)
}
</script>

<template>
  <div class="hospital">
    <div class="menu">
      <el-menu :default-active="route.path">
        <el-menu-item @click="selectMenu('/hospital/register')" index="/hospital/register" >
          <el-icon><Calendar /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item @click="selectMenu('/hospital/detail')" index="/hospital/detail" >
          <el-icon><document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item @click="selectMenu('/hospital/notice')" index="/hospital/notice">
          <el-icon><Clock /></el-icon>
          <span>预约须知</span>
        </el-menu-item>
      <el-menu-item @click="selectMenu('/hospital/close')" index="/hospital/close">
        <el-icon><Warning /></el-icon>
          <span>停诊/信息</span>
        </el-menu-item>
      <el-menu-item @click="selectMenu('/hospital/search')" index="/hospital/search">
        <el-icon><Search /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hospital {
  display: flex;
  
  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content {
    padding-top: 38px;
    flex: 8;
  }
}
</style>